<script setup lang="ts">
import type { StatisticsTableProps } from '../type'

withDefaults(
  defineProps<Partial<StatisticsTableProps>>(),
  {
    data: () => [],
    columns: () => [],
  },
)
</script>

<template>
  <table class="statistics-table">
    <thead>
      <tr>
        <th v-for="(item, index) in columns" :key="index">
          {{ item }}
        </th>
      </tr>
    </thead>
  </table>
  <div class="statistics-table-content">
    <ElScrollbar>
      <table class="statistics-table">
        <tbody>
          <tr v-for="(m, i) in data" :key="i">
            <td v-for="(n, j) in m" :key="j">
              {{ n }}
            </td>
          </tr>
        </tbody>
      </table>
    </ElScrollbar>
  </div>
</template>

<style lang="scss" scoped>
.statistics-table {
  table-layout: fixed;
  width: 100%;
  text-align: center;
  border-collapse: collapse;
  flex-shrink: 0;
  color: var(--el-text-color-regular);
  font-size: var(--el-font-size-base);
  th {
    font-weight: 500;
    background-color: var(--el-fill-color);
  }
  th,
  td {
    padding: 8px 5px;
    border: 1px solid var(--el-border-color-light);
    &:last-child {
      border-right: 0;
    }
    &:first-child {
      border-left: 0;
    }
  }
  tr:first-child {
    td {
      border-top: 0;
    }
  }
  &.no-line {
    tr:last-child {
      td {
        border-bottom: 0;
      }
    }
  }
}
.statistics-table-content {
  flex: 1;
  @include roll();
}
</style>
